<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
			<view class="nav-bar" :style="{height: height+'px'}">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<text class="title">中奖记录</text>
				<view class="placeholder"></view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<view class="record-list">
				<view class="record-item" v-for="(item, index) in recordList" :key="index">
					<view class="item-content">
						<view class="prize-info">
							<text class="prize-name">{{ item.prize_name }}</text>
							<text class="prize-time">{{ formatTime(item.draw_time) }}</text>
						</view>
						<view class="action-btn" @click="handleAction(item)">
							<text class="btn-text">{{ getActionText(item) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList: [],
				height: 0
			}
		},
		onLoad() {
			this.getRecord();
			this.height = uni.getSystemInfoSync().statusBarHeight + 44;
		},
		methods: {
			getRecord() {
				this.$u.api.index.getPrizeRecords({user_id: this.vuex_user.user_id,page:1,limit: 9999}).then(res => {
					this.recordList = res.data.records;
				});
				console.log(this.recordList);
			},
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 获取操作按钮文本
			getActionText(item) {
				// 根据奖品类型返回不同的按钮文本
				if (item.prize_name && item.prize_name.includes('购物券')) {
					return '去使用';
				} else if (item.prize_name && item.prize_name.includes('包')) {
					return '去兑换';
				}
				return '去使用';
			},
			// 处理操作按钮点击
			handleAction(item) {
				// 根据奖品类型执行不同的操作
				if (item.prize_name && item.prize_name.includes('购物券')) {
					// 跳转到使用页面
					uni.showToast({
						title: '跳转到使用页面',
						icon: 'none'
					});
				} else if (item.prize_name && item.prize_name.includes('包')) {
					// 跳转到兑换页面
					uni.showToast({
						title: '跳转到兑换页面',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '处理中奖记录',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
.container {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 头部导航栏 */
.header {
	background-color: #ff6b35;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 44px 16px 16px 16px;
	height: 60px;
	box-sizing: border-box;
}

.back-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	color: white;
	font-size: 24px;
	font-weight: bold;
}

.title {
	color: white;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	flex: 1;
}

.placeholder {
	width: 40px;
}

/* 内容区域 */
.content {
	margin-top: 104px;
	padding: 16px;
}

.record-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.record-item {
	background-color: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.item-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
}

.prize-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.prize-name {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	line-height: 1.4;
}

.prize-time {
	font-size: 14px;
	color: #999;
	line-height: 1.2;
}

.action-btn {
	background-color: white;
	border: 1px solid #ff6b35;
	border-radius: 20px;
	padding: 8px 16px;
	margin-left: 12px;
}

.btn-text {
	color: #ff6b35;
	font-size: 14px;
	font-weight: 500;
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
	.nav-bar {
		padding: 44px 12px 16px 12px;
	}
	
	.content {
		padding: 12px;
	}
	
	.item-content {
		padding: 14px;
	}
	
	.prize-name {
		font-size: 15px;
	}
	
	.prize-time {
		font-size: 13px;
	}
	
	.action-btn {
		padding: 6px 12px;
	}
	
	.btn-text {
		font-size: 13px;
	}
}
</style>
